<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文件上传</title>
<!--公共样式开始-->
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/reset.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Plugins/FontAwesome/css/font-awesome.min.css">
<!--公共样式结束-->
<!--公共JS开始-->
<script src="__PUBLIC__/Js/jquery.min.js"></script>
<!--公共JS结束-->
<!--上传插件开始-->
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Plugins/Etfile/Css/etfile.css">
<!--上传插件结束-->
<!--ZTree开始-->
<link rel="stylesheet" href="__PUBLIC__/Plugins/ZTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="__PUBLIC__/Plugins/ZTree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="__PUBLIC__/Plugins/ZTree/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="__PUBLIC__/Plugins/ZTree/js/jquery.ztree.exedit-3.5.js"></script>
<!--ztree结束-->
<!--uploadify开始-->
<script src="__PUBLIC__/Plugins/Etfile/Uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Plugins/Etfile/Uploadify/uploadify.css">
<!--uploadify结束-->
<style type="text/css">
	body {
		overflow:hidden;
	}
</style>
</head>

<body>
	<div class="etf_wraper">
		<div class="etf_left">
			<ul id="folder" class="ztree">
			</ul>
			
		</div>
		<div class="etf_right">
			<div class="etf_tool">
				<ul class="clearfix">			
					<li class="btnUpload btn"><i class=" icon-plus"></i> 上传文件</li>
					<li class="line"></li>
					<li class="btnDelete btn"><i class="icon-remove"></i> 批量删除</li>
					<li class="line"></li>
					<li class="btnRefesh btn"><i class="icon-refresh"></i> 刷新列表</li>
					<li class="line"></li>
					<li class="btnSee btnSeeAll btn"><i class="icon-eye-close"></i> 只看所选</li>
					<li class="line"></li>
					<li class="btnSelectOk btn"><i class="icon-plus"></i> 确定选择（<span>0</span>）</li>
				</ul>
			</div>
			<div class="etf_upload clearfix">				
				<div class="upload_btn" id="queue">
					<input id="file_upload" name="file_upload" type="file" multiple>
					<span class="upload_btn_begin">立即上传文件</span>
					<span class="upload_btn_close">关闭上传窗口</span>
				</div>
				<div class="upload_queue" id="uploadQueue">
				 
				</div>
			</div>
			<div class="etf_list">
			</div>
		</div>
	</div>
	<div id="loading">
	</div>
<script type="text/javascript">
	function getValue(key){ 
		return (document.location.search.match(new RegExp("(?:^\\?|&)"+key+"=(.*?)(?=&|$)"))||['',null])[1]; 
	}

	//Ajax全局事件触发
	$("#loading").ajaxStart(function(){
		$(this).show();
	}).ajaxSuccess(function(evt, request, settings){
		$(this).hide();
	});

	//全局JS变量配置
	
	var uploadObj = {};
	var folder_id = '';
	var folder_key = '';
	var now_treeNode = '';
	//文件夹
	var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
			edit: {
				enable: true,
				editNameSelectAll: true,
				showRemoveBtn: showRemoveBtn,
				showRenameBtn: showRenameBtn
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeRemove: beforeRemove,
				onRemove: onRemove,
				onRename: onRename,
				onClick: onClick
			}
		};

	/*文件夹操作开始*/
	function beforeDrag(treeId, treeNodes) {
		return false;
	}
	function beforeRemove(treeId, treeNode) {
		return confirm("确认删除文件夹：" + treeNode.name + " 吗？该操作不可逆转，将删除文件夹及其所有内容");
	}
	function onRemove(e, treeId, treeNode) {
		//showLog(treeNode.name);
		$.get('{$Think.const.__URL__}/deleteFolder/',{id:treeNode.id},function(data){
			if(data.status){
				console.log(data.info);
			}else{
				console.log(data.info);
			}
		},'json');
	}
	function onRename(e, treeId, treeNode, isCancel) {
		//showLog(treeNode);
		$.get('{$Think.const.__URL__}/renameFolder/',{id:treeNode.id,foldername:treeNode.name},function(data){
			if(data.status){
				console.log(data.info);
			}else{
				console.log(data.info);
			}
		},'json');
	}
	function onClick(event, treeId, treeNode, clickFlag) {
		getList(treeNode);
	}
	function showRemoveBtn(treeId, treeNode) {
		//return !treeNode.isFirstNode;
		return true;
	}
	function showRenameBtn(treeId, treeNode) {
		//return !treeNode.isLastNode;
		return true;
	}
	
	var newCount = 1;
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
		var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
			+ "' title='add node' onfocus='this.blur();'></span>";
		sObj.after(addStr);
		var btn = $("#addBtn_"+treeNode.tId);
		if (btn) btn.bind("click", function(){
			$.get('{$Think.const.__URL__}/createFolder/',{foldername:'新文件夹',pid:treeNode.id,pkey:treeNode.key},function(data){
				if(data.status){
					leftZTree.addNodes(treeNode, {
						id:data.id,
						pId:data.pid,
						name:data.foldername,
						key:data.key,
						iconSkin:"myfolder"
					});
				}else{
					console.log(data.info);
				}
			},'json');
			
			leftZTree.refresh();
			return false;
		});
	};
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_"+treeNode.tId).unbind().remove();
	};
	/*文件夹操作结束*/
	
	var leftZTree, leftRMenu;
	$(document).ready(function(){
		//初始化左侧文件夹
		$.get('{$Think.const.__URL__}/folderList/',function(data){
			if(data.length==0){
				console.log('没有找到任何文件夹！');
			}else{
				$.fn.zTree.init($("#folder"), setting, data);
				leftZTree = $.fn.zTree.getZTreeObj("folder");
				leftZTree.setting.edit.editNameSelectAll = true;
				
				var node = leftZTree.getNodeByParam('id', data[0].id);//获取id为1的点  
				leftZTree.selectNode(node);//选择点  
				leftZTree.setting.callback.onClick(null, leftZTree.setting.treeId, node);//调用事件  

			}
		},'json');
		
		//计算尺寸
		function layout(){
			$('.etf_wraper').height($(window).height()-20);
			var wetf_wraper = $('.etf_wraper').width();
			var hetf_wraper = $('.etf_wraper').height();
			var wetf_left = $('.etf_left').width();
			$('.etf_right').width(wetf_wraper-wetf_left-70);
			$('.etf_right').height(hetf_wraper);
			$('.etf_list').height(hetf_wraper-30);
			$('.etf_left').height(hetf_wraper-20);
		}
		layout();
		
		$(window).on('resize',function(){
			layout();
		});
		
		
		//上传文件按钮
		$('#file_upload').uploadify({
			'debug' : true,
			'fileObjName' : 'file', //定义上传数据处理文件中接收数据使用的文件对象名
			'queueID' : 'uploadQueue', //上传文件列表的Id
			'auto'     : false, //是否自动上传
			'buttonClass' : 'upload_btn_select', //上传按钮的CSS样式
			'buttonText' : '请选择上传文件', //上传按钮显示的文字
			'fileSizeLimit' : '{$FL_maxSize}KB', //限制上传的大小
			'fileTypeDesc' : '可以上传图片、压缩文件、音频、视频、PDF', //可选择的文件类型的描述
			'fileTypeExts' : '*.gif; *.jpg; *.png; *.zip; *.rar; *.mp3; *.wav; *.avi; *.wmv; *.pdf', //选项允许你限制上传文件的类型
			'swf'      : '__PUBLIC__/Plugins/Etfile/Uploadify/uploadify.swf',
			'uploader' : '{$FL_UPLOAD_URL}',
			'formData'     : {
				'token'     : '{$token}', //token
            },
			'onUploadError' : function(file, errorCode, errorMsg, errorString) {
				console.log(file.name + ' 上传失败。详细信息: ' + errorString);
			},
			'onUploadComplete' : function(file){
				getList();
			},
			'onUploadSuccess' : function(file, data, response) {
				//console.log(response);
				//console.log(data);
			},
			'onUploadStart' : function(file) {
				var filekey = Date.parse(new Date())+ parseInt((Math.random(900)+100));
				filekey = folder_key + filekey;
				
				uploadObj.folder_id = folder_id;
				uploadObj.filekey = filekey;
				uploadObj.title = file.name;
				
				$('#file_upload').uploadify('settings','formData',
					{
						'folder_id':folder_id,
						'key':filekey,
						'x:key':filekey,
						'x:title':encodeURIComponent(file.name)
					}
				);
            	//console.log('start:'+file.name);
        	}
		});
		
		//工具栏事件处理
		$('.btnRefesh').on('click',function(){
			getList();
		});
		$('.btnUpload').on('click',function(){
			$('.etf_upload').toggle();
		});
		//隐藏上传面板
		$('.upload_btn_close').on('click',function(){
			$('.etf_upload').hide();
		});
		//确定选择
		$('.btnSelectOk').on('click',function(){
			var data = {};
			var i = 0;
			var file_ids = '0';
			
			var arrUrl = [];
			$('.etf_list>.selected').each(function(index, element) {
				if($(this).attr('ftype')=='folder'){
				}else{
					var data_son = {};
					data_son.id = $(this).attr('dataid');
					data_son.title = $(this).attr('title');
					data_son.href = $(this).attr('datasrc');
					data_son.thumb = $(this).attr('datathumb');
					data_son.ftype = $(this).attr('ftype');
					data[i] = data_son;
					
					arrUrl.push('{$UPLOAD_PATH}'+$(this).attr('datasrc'));
					i++;
				}				
			});
			//console.log(window.parent);
			//console.log(window.parent.dealSelectFile);
			var editor = getValue('editor');
			//console.log(editor);
			//console.log(window.parent.callback);
			
			if(window.parent.dealSelectFile && editor!='ok'){
				//console.log('no');
				window.parent.dealSelectFile(data);
			}
			if(window.callback && editor=='ok'){
				//console.log(data);
				//console.log(arrUrl);
				window.callback('!'+arrUrl.join(' '));
			}
		});
		//开始上传
		$('.upload_btn_begin').on('click',function(){
			if(folder_id == ''){
				alert('请选择要上传到哪个文件夹！');
			}else{
				$('#file_upload').uploadify('upload','*');
			}
		});
		
		//列表事件处理
		//选中文件
		$('.etf_item').live('click',function(){
			$(this).toggleClass('selected');
			$('.btnSelectOk>span').html($('.etf_list>.selected').length);
		});
		//只看所选
		$('.btnSee').on('click',function(){
			if($(this).is('.btnSeeSelect')){
				$(this).removeClass('btnSeeSelect');
				$(this).addClass('btnSeeAll');
				$(this).html('<i class="icon-eye-close"></i> 查看所有');
				$('.etf_list>.etf_item').show();
			}else{
				$(this).addClass('btnSeeSelect');
				$(this).removeClass('btnSeeAll');
				$('.etf_list>.etf_item').hide();
				$(this).html('<i class="icon-eye-open"></i> 只看所选');
				$('.etf_list>.selected').show();
			}
		});
		//批量删除
		$('.btnDelete').on('click',function(){
			var file_ids = '0';
			var folder_ids = '0';
			$('.etf_list>.selected').each(function(index, element) {
				if($(this).attr('ftype')=='folder'){
					folder_ids += ','+$(this).attr('dataid');
				}else{
					file_ids += ','+$(this).attr('dataid');
				}				
			});
			
			if(folder_ids !== '0'){
				alert('文件夹不能批量删除');
				return false;
			}
			if(file_ids !== '0'){
				$.get('{$Think.const.__URL__}/deleteFile/',{id:file_ids},function(data){
					if(data.status==0){
						console.log(data);
					}else{
						getList();
					}
				},'json');
			}			
		});
		
		//获取文件列表
		function getList(treeNode){
			if(treeNode){
				now_treeNode = treeNode;
			}else{
				treeNode = now_treeNode;
			}
			folder_id = treeNode.id;
			folder_key = treeNode.key;
			var html = '';
			$.get('{$Think.const.__URL__}/listFolder/',{id:treeNode.id,rnd:Math.random()},function(data){
				if(data.rows.length==0){
					html += '<div class="etf_empty">该目录下没有任何文件</div>';
					$('.etf_list').html(html);
				}else{
					for(var j=0; j<data.rows.length ; j++){
						html += '<dl class="etf_item" dataid="'+data.rows[j]['id']+'" datasrc="'+data.rows[j]['href']+'" title="'+data.rows[j]['title']+'" datathumb="'+data.rows[j]['thumb']+'" title="'+data.rows[j]['title']+'" ftype="'+data.rows[j]['ftype']+'">';
						html += '<dt><img src="'+data.rows[j]['thumb']+'"/></dt>';
						html += '<dd class="etf_item_text">';
						html += '<input type="text" value="'+data.rows[j]['title']+'" dataid="'+data.rows[j]['id']+'"/>';
						html += '</dd>';
						html += '<dd class="etf_item_tool">';
						if(data.rows[j]['tool']['see']){
							html += '<span class="etf_item_see"><i class="icon-eye-open"></i></span>';
						}
						if(data.rows[j]['tool']['cut']){
							html += '<span class="etf_item_cut"><i class="icon-cut"></i></span>';
						}
						if(data.rows[j]['tool']['down']){
							html += '<span class="etf_item_down"><i class=" icon-circle-arrow-down"></i></span>';
						}
						if(data.rows[j]['tool']['del']){
							html += '<span class="etf_item_del"><i class="icon-remove-sign"></i></span>';
						}
						if(data.rows[j]['tool']['link']){
							html += '<span class="etf_item_link"><i class="icon-link"></i></span>';
						}
						html += '</dd>';
						html += '</dl>';
					}
					
					$('.etf_list').html(html);
				}
			},'json');
		}
		window.getList = getList;
		
		//填写文件名时，不选中
		$('.etf_item input').live('click',function(event){
			event.stopPropagation();
		});
		//当修改文件名时
		$('.etf_item input').live('change',function(event){
			$.get('{$Think.const.__URL__}/renameFile/',{id:$(this).attr('dataid'),title:$(this).val()},function(data){
				if(data.status==0){
					console.log('修改文件名失败！');
				}
			},'json');
			
			event.stopPropagation();
		});
		
		//删除文件
		$('.etf_item_del').live('click',function(event){
			var id = $(this).parent().parent().attr('dataid');
			$.get('{$Think.const.__URL__}/deleteFile/',{id:id},function(data){
				if(data.status==0){
					console.log(data);
				}else{
					getList();
				}
			},'json');
			
			event.stopPropagation();
		});
		//查看图片
		$('.etf_item_see').live('click',function(event){
			var src = $(this).parent().parent().attr('datasrc');
			window.open(src);
			event.stopPropagation();
		});
		//立即下载
		$('.etf_item_down').live('click',function(event){
			var src = $(this).parent().parent().attr('datasrc');
			window.open(src);
			event.stopPropagation();
		});
		//查看链接
		$('.etf_item_link').live('click',function(event){
			var src = $(this).parent().parent().attr('datasrc');
			window.open(src);
			event.stopPropagation();
		});
		//裁剪图片
		$('.etf_item_cut').live('click',function(event){
			var src = $(this).parent().parent().attr('datasrc');
			window.open('{$Think.const.__URL__}/croper&datasrc='+escape(src));
			event.stopPropagation();
		});
	});
</script>
</body>
</html>